<template>
  <div class="main page">
    <!-- <nav-bar /> -->
    <div class="main-container">
      <div class="side-menu">
        <a-menu
          style="width: 172px"
          mode="vertical"
          theme="dark"
          :items="menu_items"
          v-model:selected-keys="current_menu_items"
        />
        <div class="side-menu-opts"></div>
      </div>
      <div class="website-config">
        <a-tabs
          v-model:activeKey="activeTab"
          type="card"
          class="website-config-tab"
          :destroyInactiveTabPane="true"
          @change="handleTabChange"
        >
          <a-tab-pane
            key="categoryScript"
            tab="全局类目加载脚本"
            class="tab-pane"
          >
            <set-category-script
              @switch_tab="switch_tab"
              ref="categoryScript"
            />
          </a-tab-pane>
          <!-- <a-tab-pane
            key="DataGridScript"
            tab="数据表格生成脚本"
            class="tab-pane"
          >
            <set-data-grid-script
              @switch_tab="switch_tab"
              ref="DataGridScript"
            />
          </a-tab-pane>
          <a-tab-pane key="sqlGeneration" tab="SQL生成脚本" class="tab-pane">
            <set-sql-generation @switch_tab="switch_tab" ref="sqlGeneration" />
          </a-tab-pane>
          <a-tab-pane key="sqlExecution" tab="SQL执行脚本" class="tab-pane">
            <set-sql-execution @switch_tab="switch_tab" ref="sqlExecution" />
          </a-tab-pane>
          <a-tab-pane key="FaSyncScript" tab="FA数据同步脚本" class="tab-pane">
            <set-fa-sync-script @switch_tab="switch_tab" ref="FaSyncScript" />
          </a-tab-pane> -->
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Menu, Tabs, TabPane } from 'ant-design-vue';
import SetCategoryScript from '@/components/global_settings/SetCategoryScript.vue';
// import SetDataGridScript from "@/components/global_settings/SetDataGridScript.vue";
// import SetSqlGeneration from "@/components/global_settings/SetSqlGeneration.vue";
// import SetSqlExecution from "@/components/global_settings/SetSqlExecution.vue";
// import SetFaSyncScript from '@/components/global_settings/SetFaSyncScript.vue';
import { fetch_all_global_config } from '@/utils/storage.js';

/* eslint-disable no-debugger */
export default {
  name: 'SettingsPage',
  props: {},
  data() {
    return {
      current_menu_items: ['global'],
      menu_items: [
        {
          key: 'global',
          label: '全局',
          title: '全局',
        },
      ],
      activeTab: 'categoryScript',
      confirmLoading: false,
      create_site_form: {
        site_name: '',
        site_code: '',
      },
    };
  },
  async mounted() {
    await fetch_all_global_config();
  },
  components: {
    AMenu: Menu,
    ATabs: Tabs,
    ATabPane: TabPane,
    SetCategoryScript,
    // SetDataGridScript,
    // SetSqlGeneration,
    // SetSqlExecution,
    // SetFaSyncScript,
  },
  methods: {
    switch_tab(target_tab) {
      this.activeTab = target_tab;
      this.handleTabChange(target_tab);
    },
    handleTabChange(key) {
      // console.log("refs ->", this.$refs);
      console.log('key ->', key);
      if (this.$refs[key]?.reload) {
        this.$refs[key].reload();
      }
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  height: 100%;

  .nav {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    max-height: 50px;

    .nav_logo {
      font-weight: bold;
      font-size: 1.2rem;
      color: #333333;
      width: 200px;
    }

    .nav_home {
      cursor: pointer;
    }
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: row;

    .side-menu {
      max-width: 256px;
      padding-top: 10px;
      background-color: #001529;
      height: 100%;
      border: none;
      display: none;
      flex-direction: column;
      justify-content: space-between;

      .side-menu-opts {
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 8px;
      }
    }

    .website-config {
      flex: 1;
      padding: 15px 20px;

      .website-config-tab {
        width: 100%;
        height: 100%;

        .tab-pane {
          width: 100%;
          height: calc(100vh - 100px);
        }
      }
    }
  }
}
</style>
